<template>
  <div class="first">
    <!-- <hmNavBar title="校园头条" icon=""></hmNavBar> -->
    <div class="content">
      <div class="channelToggle">
        <van-row>
          <van-tabs
            class="channelList"
            v-model="active"
            @click="saveChannelId"
            swipe-threshold="4"
          >
            <van-tab
              v-for="(item, index) in userChannelList"
              :title="item.name"
              :key="index"
              :name="item.id"
            ></van-tab>
          </van-tabs>
          <i class="iconfont deleteChannel " @click="changeChannel">&#xe643;</i>
        </van-row>
      </div>
      <div class="artcileList">
        <articleItem :channel_id="active"></articleItem>
        <!-- <test :channel_id="active"></test> -->
      </div>
      <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
        <div class="myChannel">
          <van-cell title="我的频道">
            <template #default>
              <span
                class="edit"
                @click="myChannelEdit"
                v-if="!myChannelDeleteBtn"
                >编辑</span
              >
              <span class="edit" @click="myChannelEditComplete" v-else
                >完成</span
              >
            </template>
          </van-cell>
          <van-grid :column-num="4">
            <van-grid-item
              v-for="(item, index) in userChannelList"
              :key="item.id"
              @click="myChannelClick(item.id)"
              :class="{ active: active === item.id }"
              class="myChannelBox"
            >
              <template #default>
                {{ item.name }}
                <i
                  class="iconfont delete"
                  v-if="myChannelDeleteBtn && item.id !== 0"
                  @click="myChannelDelete(index)"
                  >&#xe605;</i
                ></template
              >
            </van-grid-item>
          </van-grid>
        </div>
        <div class="recommendChannel">
          <van-cell title="推荐频道"></van-cell>
          <van-grid :column-num="4">
            <van-grid-item
              v-for="(item, index) in recommendChannelList"
              :key="index"
              :text="item.name"
              @click="channelAdd(index)"
            />
          </van-grid>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { userChannels, recommendChannels } from '@/api/first.js'
export default {
  name: 'First',
  data () {
    return {
      userChannelList: [],
      recommendChannelList: [],
      active: 0,
      show: false,
      myChannelDeleteBtn: false,
      userChannelListId: []
    }
  },
  activated () {
    window.scrollTo(0, this.$route.meta.scrollTop)
  },
  async created () {
    // 获取用户列表
    const res = await userChannels()
    this.userChannelList = res.data.channels
    // 获取推荐列表
    const res2 = await recommendChannels()
    // 频道列表筛选
    this.userChannelListId = this.userChannelList.map(item => item.id)
    this.recommendChannelList = res2.data.channels.filter(
      item => !this.userChannelListId.includes(item.id)
    )
  },
  mounted(){
    // document.title = this.$route.meta.title
  },
  methods: {
    changeChannel () {
      this.show = true
    },
    saveChannelId (name) {
      this.channelId = name
    },
    myChannelClick (index) {
      this.active = index
    },
    myChannelEdit () {
      this.myChannelDeleteBtn = true
    },
    myChannelEditComplete () {
      this.myChannelDeleteBtn = false
      this.show = false
    },
    myChannelDelete (id) {
      this.recommendChannelList.push(this.userChannelList.splice(id, 1)[0])
    },
    channelAdd (index) {
      this.userChannelList.push(this.recommendChannelList.splice(index, 1)[0])
    }
  }
}
</script>

<style lang="less" scoped>
.first {
  .content {
    padding: 0 @p15;
    .artcileList {
      margin-top: 50px;
    }
    .channelToggle {
      position: fixed;
      top: 0;
      right: 0;
      padding: 0 @p15;
      width: 100%;
      z-index: 1;
    }
    .channelList {
      position: relative;
      font-family: MicrosoftYaHei;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      padding-right: 35px;
      color: #777777;
      ::v-deep .van-tabs__line {
        background-color: #3296fa;
      }
    }
    ::v-deep .van-tabs__wrap--scrollable .van-tabs__nav--complete {
      padding-left: 0;
      padding-right: 0;
    }
    i {
      position: absolute;
      top: 0;
      right: 15px;
      padding-left: 10px;
      background-color: #ffffff;
      line-height: 45px;
      font-size: 24px;
      color: #8c8c8c;
      z-index: 2;
    }
    .myChannel {
      .edit {
        color: #ff0000;
        padding: 3px 10px;
        border-radius: 24px;
        border: 1px solid #ff0000;
      }
      .active {
        color: #ff0000 !important;
      }
      .myChannelBox {
        position: relative;
        color: #646566;
        font-size: 0.32rem;
        line-height: 1.5;
        word-break: break-all;
        .delete {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 10px;
        }
      }
    }
  }
}
</style>
